import React from 'react';
import Util from '../../common/util.js';
import Config from '../../common/config.js';
import $ from 'webpack-zepto';

/**
 * 活动商品组件
 *
 * 展示活动商品信息,包括必要内容:
 * 商品图片;
 * 商品名称;
 * 商品价格;
 * 商品规格;(是否可操作)
 * 购买数量;(是否可操作)
 *
 * 以及可选内容:
 * 活动说明内容
 *
 */
var scope;
export default class GoodsItem extends React.Component {

    constructor(props) {
        super(props);
        scope = this;

        var {header:header,footer:footer,goodsItem:goodsItem,parent:parent,isOpt:isOpt} = props.settings;
        this.state = {
            header: header,
            goodsItem: goodsItem,
            parent: parent,
            isOpt: isOpt,
            footer: footer,
            type: props.type
        };
    };

    componentWillReceiveProps(props) {
        this.setState({
            header: props.settings.header,
            isOpt: props.settings.isOpt,
            goodsItem: props.settings.goodsItem,
            footer: props.settings.footer
        });
    };

    render() {
        return (
            <div className="goods-activity-item">
                {this.state.header ? this.header(this.state.header) : ''}
                {this.goodsItem(this.state.goodsItem, this.state.isOpt, this.state.type)}
                {this.state.footer ? this.footer(this.state.footer) : ''}
            </div>
        );
    };

    header(header) {
        return (
            <div className="header">
                <div className="header-top">
                    {header.icon ? this.headerIcon(header.icon) : ''}
                    {header.title ? this.headerTitle(header.title) : ''}
                </div>
                {header.price && header.gc_name ? this.headerInfo(header.price, header.gc_name) : ''}
            </div>
        );
    };

    headerIcon(icon) {
        return (
            <img className="gift-icon" src={icon} alt="折扣图标"/>
        );
    };

    headerTitle(title) {
        return (
            <span className="discount-title">{title}</span>
        );
    };

    headerInfo(price, goodsName) {
        return (
            <div className="discount-desc">
                每购买一盒原价多路片产品，即可享受加价RMB<span className="discount-price">{price}/盒</span>优惠购{goodsName}产品
            </div>
        );
    };


    goodsItem(goodsItem, isOpt, type) {
        if (type) {
            return this.goodsItemCart(goodsItem, isOpt);
        } else {
            return this.goodsItemOther(goodsItem, isOpt);
        }
    };

    goodsItemCart(goodsItem, isOpt) {
        return (
            <div className="body">
                <div className="goods-img"><img src={goodsItem.goods_thumb} alt=""/></div>
                {!isOpt ? this.goodsName(goodsItem) : '' }
                {!isOpt ? this.goodsItemNameIcon() : '' }
                {!isOpt ? this.goodsItemSpecAndAmount(goodsItem) : this.goodsItemAmountOpt(goodsItem)}
                {!isOpt ? this.goodsPrice(goodsItem) : '' }
            </div>
        )
    };

    goodsItemOther(goodsItem, isOpt) {
        return (
            <div className="body">
                <div className="goods-img"><img src={goodsItem.goods_thumb} alt=""/></div>
                <div className="goods-name">{Util.shortStr(goodsItem.goods_name, 8, '...')}</div>
                {!isOpt ? this.goodsItemNameIcon() : '' }
                <div className="goods-price">RMB:<span>{goodsItem.sale_price}</span></div>
                {!isOpt ? this.goodsItemSpecAndAmount(goodsItem) : ''}
            </div>
        );
    };

    goodsName(goodsItem) {
        return (
            <div className="goods-name">{Util.shortStr(goodsItem.goods_name, 8, '...')}</div>
        )
    };

    goodsPrice(goodsItem) {
        return (
            <div className="goods-price">RMB:<span>{goodsItem.sale_price}</span></div>
        )

    };

    goodsItemNameIcon() {
        return (
            <div className="icon">
                <img src="images/chaozhigou.png" alt="超值购icon"/>
            </div>
        )
    };

    goodsItemSpecAndAmount(goodsItem) {
        return (
            <div className="spec">
                规格:<span>{goodsItem.spec_desc}</span>
            </div>
        )
    };

    goodsItemAmountOpt(goodsItem) {
        var type = this.props.type;
        var num = goodsItem.goods_num;
        var max = goodsItem.max;
        var min = goodsItem.min;
        var minGrayClass = '';
        var maxGrayClass = '';
        if (max && max == num) {
            maxGrayClass = 'gray-counter';
        }
        if (min == num) {
            minGrayClass = 'gray-counter';
        }
        return (
            <div className="counter-box">
                <div className="counter-title">{type ? '数量：' : '购买数量：'}</div>
                <ul className="counter">
                    <li className={minGrayClass} onClick={this.minusNum.bind(this)}> -</li>
                    <li>{goodsItem.goods_num} </li>
                    <li className={maxGrayClass} onClick={this.plusNum.bind(this)}> +</li>

                </ul>
            </div>
        );
    };


    minusNum() {
        if (scope.state.type) {
            var goodsItem = this.state.goodsItem,
                num = goodsItem.goods_num,
                total;
            num--;
            if (num < 0) {
                return
            }
            goodsItem.goods_num = num <= 0 ? 0 : num;
            this.setState({
                goodsItem: goodsItem
            });
            $.ajax({
                url: Config.path('duolu/cart', ['?uToken=' + Util.storage().get(Util.appId())]),
                type: 'put',
                data: goodsItem
            });
            total = parseFloat(-goodsItem.sale_price);
            this.props.callbackParent(total, this.state.parent)
        } else {
            var footer = scope.state.footer;
            var min = footer.min;
            var num = footer.goods_num;
            if (min < num) {
                scope.props.handleDisNumber(num - 1);
            } else {
                return;
            }
        }

    };

    plusNum() {
        if (scope.state.type) {
            var goodsItem = this.state.goodsItem,
                num = goodsItem.goods_num,
                total;
            num++;
            if (num > this.state.parent.goods_num) {
                return
            }
            goodsItem.goods_num = num >= this.state.parent.goods_num ? this.state.parent.goods_num : num;
            this.setState({
                goodsItem: goodsItem
            });
            $.ajax({
                url: Config.path('duolu/cart', ['?uToken=' + Util.storage().get(Util.appId())]),
                type: 'put',
                data: goodsItem
            });
            total = parseFloat(goodsItem.sale_price);
            this.props.callbackParent(total, this.state.parent)
        } else {
            var footer = scope.state.footer;
            var max = footer.max;
            var num = footer.goods_num;
            if (max) {
                if (max < (num + 1)) {
                    return;
                }
            }
            scope.props.handleDisNumber(num + 1);
        }


    };

    footer(footer) {
        return (
            <div className="footer">
                {footer.specArr ? this.specBox(footer.specArr) : ''}
                {footer ? this.goodsItemAmountOpt(footer) : ''}
            </div>
        );
    };

    specBox(specArr) {
        return (
            <div className="goods-item-spec">
                <div className="spec-box">
                    <div className="choose-box-left">排量选择：</div>
                    <div className="choose-box-right">
                        {this.specItem(specArr)}
                    </div>
                </div>
            </div>
        );
    };

    specItem(specArr) {
        var choosedIndex = scope.state.footer.choosed_index_dis;
        var items = specArr.map(function (item, index) {
            var img_url = 'images/spec.png';
            var activeClass = '';
            if (choosedIndex == index) {
                img_url = 'images/spec_choosed.png';
                activeClass = 'active';
            }
            return (
                <li className={activeClass} key={item.yhg_goods_id + '-spec'}>
                    <img className="spec-img" src={img_url}/>
                    <div className="spec-name">{item.spec_desc}</div>
                </li>
            );
        });
        return <ul className="spec-list">{items}</ul>
    };


    // handleSpecChoose(index){
    //     scope.props.specChooseCallback({
    //         choosed_index : index
    //     });
    // };


};